<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'

// 定义状态变量
// 使用时：
// html 结构中使用，没有差异
// 在逻辑代码中使用：ref 定义的要.value  reactive 直接用即可

// 复杂和基本的都可以（适用性更广）
const info = ref('123')

const changeInfo = () => {
  info.value = '456'
}

// 只能定义复杂类型的数据
const obj = reactive({
  name: 'jack',
  age: 18,
})
const changeObj = () => {
  // 不能重新赋值
  // obj = {}
  obj.name = 'rose'
  obj.age = 20
}

// v-html和 v-text 指令（v-开头的一系列特殊属性 vue 中才可以解析）
const msg = ref('<a href="https://www.baidu.com">去百度</a>')

// 条件渲染
const age = ref(15)
// v-show 根据表达式的解决决定是否显示，不会销毁只是隐藏而已
// v-if 决定是否显示，通过销毁来实现的，v-else 和 v-else-if 要结合使用

// 解析路由参数的对象
const route = useRoute()
// query 查询参数 格式 ?key=value&key2=value2
console.log(route.query.key)
console.log(route.query.key2)
</script>

<template>
  <h2 @click="changeInfo">{{ info }}</h2>
  <h2 @click="changeObj">{{ obj.name }} + {{ obj.age }}</h2>
  <!-- 解析标签 -->
  <h3 v-html="msg"></h3>
  <!-- 直接当做文本解析 -->
  <h3 v-text="msg"></h3>
  <button @click="msg = '<button>点我试试</button>'">按钮</button>

  <button @click="age++">年龄{{ age }}</button>
  <img v-show="age >= 18" src="https://img0.baidu.com/it/u=2930531350,4176221976&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800" alt="" srcset="" />

  <!-- 高考 17 岁 -->
  <img v-if="age === 17" src="https://img0.baidu.com/it/u=129277002,2148913291&fm=253&fmt=auto&app=120&f=JPEG?w=749&h=500" alt="" />

  <!-- 网吧 18 岁 -->
  <img v-else-if="age < 20 && age > 17" src="https://img0.baidu.com/it/u=2930531350,4176221976&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800" alt="" srcset="" />

  <!-- 酒吧 20 岁 -->
  <img v-else-if="age >= 20" src="https://img2.baidu.com/it/u=3795365047,2702410512&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="" />
</template>

<style scoped>
img {
  width: 200px;
  display: block;
  margin: 5px;
}
</style>
